<{extends file="layout.tpl"}>

<{block name=css}>
<style type="text/css">
	.serverTable{ margin-top: 30px; }
	.serverTable th, .serverTable td{ text-align: center; }
	#serverPage{ text-align: right; }
</style>
<{/block}>


<{block name=content}>
<section class="m-panel-box">
	<h4>服务器信息</h4>
	<div class="m-panel-body">
		<table class="table table-striped table-bordered table-hover serverTable">
			<thead>
				<tr>
					<th>是否为主服务器</th>
					<th>用作NS记录</th>
					<th>服务器名称</th>
					<th>描述</th>
					<th>服务器组名称</th>
					<th>类型</th>
					<th>区域文件状态</th>
					<th>记录状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<div id="serverPage"></div>
	</div>
</section>
<{/block}>

<{block name=js}>
<script type="text/javascript">
var firstLoad = true;

$('.serverTable').delegate('.deleteServer', 'click', function(){
	var id = $(this).data('id');
	var layer2 = layer.confirm('此操作不可撤回！', {icon: 2, title: '提示'}, function(){
		ajaxObj('/NameServers/delServer', 'get', {id}, function(obj){
			if(obj.code == 1){
				layer.msg('操作成功！');
				layer.close(layer2);
				loadServerList(1);
			}else{
				layer.close(layer2);
				layer.msg(obj.msg);
			}
		})
	})
})

$('.sureAdd').click(function(){
	var name = $('.m-addServer-name').val();
	var des = $('.m-addServer-des').val();
	ajaxObj('/serverGroup/addData', 'post', {group_name: name, group_description: des}, function(obj){
		if(obj.code == 1){
			layer.msg(obj.msg);
			$('#addServer').modal('hide');
			$('.m-addServer-name').val('');
			$('.m-addServer-des').val('');
			loadServerGroup(1);
		}
	})
})

	//加载服务器组列表
	function loadServerList(page){
		ajaxObj('/NameServers/getServerList', 'post', {page, pageSize: 10}, function(obj){
			var str = '';
			$(".serverTable tbody").html('');
			if(obj.num != 0){
				obj.serverList.map(function(data){
					var primary_server = data.server_primary == 1 ? '<span class="label label-success">√</span>': '<span class="label label-danger">×</span>';
					var server_record = data.server_record == 1 ? '<span class="label label-success">√</span>': '<span class="label label-danger">×</span>';
					var api_sync_config = data.api_sync_config == 1 ? '<span class="label label-success">√</span>': '<span class="label label-danger">×</span>';
					var api_sync_log = data.api_sync_log == 1 ? '<span class="label label-success">√</span>': '<span class="label label-danger">×</span>';
					str += `<tr>
										<td>${primary_server}</td>
										<td>${server_record}</td>
										<td>${data.server_name}</td>
										<td>${data.server_description}</td>
										<td>${data.group_name}</td>
										<td>${data.server_type}</td>
										<td>${api_sync_config}</td>
										<td>${api_sync_log}</td>
										<td>
											<a class="btn btn-xs btn-info" href="/NameServers/serverDetails?id=${data.id}">详情</a>	
											<button class="btn btn-xs btn-danger deleteServer" data-id=${data.id}>删除</button>	
										</td>
									</tr>`

					if(firstLoad){
						firstLoad = false;
						layui.use(['laypage', 'layer'], function(){
						  var laypage = layui.laypage
						  ,layer = layui.layer;
						  
						  //总页数低于页码总数
						  laypage.render({
						    elem: 'serverPage'
						    ,limit: 10
						    ,count: obj.num //数据总数	
						    ,theme: '#20A0FF'
						    ,jump: function(curr, first){
						    	!first && loadServerList(curr.curr);
						    }
						  });
						})
					}
				})
			}else{
				str += '<tr><td colspan="4">暂无信息</td></tr>'
			}
			$(".serverTable tbody").append(str);
		})
	}

	loadServerList(1);

	function deleteServer (id)
	{	
		
		
	}
</script>
<{/block}>